<template>
  <div class="HomeView">
    <div class="banner">
      <div class="banner-main max-wrapper">
        <!-- <div class="banner-title">武汉市宣传思想工作数字服务平台</div> -->
        <!-- <div class="banner-desc">理论宣传 推广普及社会科学理论 提高人们对客观世界规律的认识</div> -->
      </div>
      <div class="banner-nav">
        <div class="nav-main max-wrapper">
          <div class="nav-item" @click="newTab('/theoretical-learning')">
            <div class="nav-logo xuexi"></div>
            <div class="nav-r">
              <span>理论学习</span>
              <!-- <span>Theoretical learning platform</span> -->
              <span class="line"></span>
            </div>
          </div>
          <div class="nav-line"></div>
          <div class="nav-item" @click="newTab('/explain-and-publicize')">
            <div class="nav-logo xuanchuan"></div>
            <div class="nav-r">
              <span>理论宣传</span>
              <!-- <span>Theoretical publicity</span> -->
              <span class="line"></span>
            </div>
          </div>
          <div class="nav-line"></div>
          <div class="nav-item" @click="ElMessage.info('建设中')">
            <div class="nav-logo yanjiu"></div>
            <div class="nav-r">
              <span>理论研究</span>
              <!-- <span>Theoretical research</span> -->
              <span class="line"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modules max-wrapper">
      <div class="module-item" @click="newTab('/expert-database')">
        <img src="@/assets/images/front/module_zhuanjia.png">
        <div class="module-name">专家库</div>
        <div class="module-line"></div>
        <!-- <div class="module-desc">Expert database</div> -->
      </div>
      <div class="module-item" @click="newTab('/expert-achievements')">
        <img src="@/assets/images/front/module_chengguo.png">
        <div class="module-name">成果库</div>
        <div class="module-line"></div>
        <!-- <div class="module-desc">Achievement database</div> -->
      </div>
      <div class="module-item" @click="newTab('https://zhiku.cnki.net')">
        <img src="@/assets/images/front/module_zhuanti.png">
        <div class="module-name">专题智库</div>
        <div class="module-line"></div>
        <!-- <div class="module-desc">Special Think Tank</div> -->
      </div>
      <div class="more-function">
        <!-- <div class="more-title"><span>特色功能</span>/Featured features</div> -->
        <div class="more-title"><span>特色功能</span></div>
        <el-row :gutter="26">
          <el-col :span="12">
            <div class="common-more">理论学习</div>
            <span class="fun-item" @click="newTab('https://dj.cnki.net/xjpd/#/index')">学习资料</span>
            <span class="fun-item" @click="goBackendFilling">一学一报</span>
          </el-col>
          <el-col :span="12">
            <div class="common-more">宣讲服务</div>
            <span class="fun-item" @click="newTab('/explain-and-publicize/publicize-course')">宣讲点单</span>
            <span class="fun-item" @click="goBackendSubmitted">宣讲报送</span>
          </el-col>
          <el-col :span="24">
            <div class="common-more">申报</div>
            <span class="fun-item" @click="ElMessage.info('建设中')">武汉社科奖申报</span>
            <span class="fun-item" @click="goBackendFund">社科基金课题申报</span>
            <span class="fun-item" @click="ElMessage.info('建设中')">社科联课题申报</span>
            <span class="fun-item" @click="ElMessage.info('建设中')">基层理论宣讲先进申报</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 理论学习 -->
    <div class="study-jinping">
      <div class="max-wrapper">
        <div class="common-title" style="padding-bottom: 14px;">
          <!-- <div class="title" style="color: #fff;"><span>理论学习</span>/Latest Lecture</div> -->
          <div class="title" style="color: #fff;"><span>理论学习</span></div>
          <div class="more" @click="newTab('/theoretical-learning')">
            <div class="line"></div>
            <span style="color: #fff;">查看更多</span>
            <div class="line"></div>
          </div>
        </div>
        <div class="study-title">习近平新时代中国特色社会主义思想</div>
        <!-- <div class="study-desc">New Era and New Ideas</div> -->
        <div class="theme-list">
          <div @click="toOtherPage(themeItem.subjectCnkiUrl)" :style="themeItem.style" class="theme-item"
            v-for="(themeItem, themeIndex) in themeList" :key="themeIndex">
            {{ themeItem.name }}
            <el-icon style="margin-left: 6px;position: relative;top: 3px;">
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <!-- 理论宣传 -->
    <div class="study">
      <div class="study-main max-wrapper">
        <div class="common-title" style="padding-bottom: 14px;">
          <!-- <div class="title" style="color: #fff;"><span>理论宣传</span>/Latest Lecture</div> -->
          <div class="title" style="color: #fff;"><span>理论宣传</span></div>
          <div class="more" @click="newTab('/explain-and-publicize')">
            <div class="line"></div>
            <span style="color: #fff;">查看更多</span>
            <div class="line"></div>
          </div>
        </div>
        <div @click="toTrends(studyNews[0])" style="cursor: pointer;" v-if="studyNews.length != 0">
          <div class="study-date flex-center">{{ format(studyNews[0].pubDate) }}</div>
          <div class="study-text-title otw-1">{{ studyNews[0].name }}</div>
          <div class="study-text otw-7">{{ extractText(studyNews[0].content) }}</div>
          <img :src="getImageUrl(studyNews[0].newsPicture)" class="study-img">
        </div>
      </div>
    </div>
    <div class="study-report max-wrapper">
      <div class="more-buuton">
        <!-- <el-button type="primary" v-if="studyNews.length != 0" @click="toTrends(studyNews[0])" round>MORE</el-button> -->
      </div>
      <el-row v-if="studyNews.length >= 2" :gutter="23">
        <el-col @click="toTrends(studyItem)"
          v-for="(studyItem, studyIndx) in studyNews.filter((_, filIndex) => filIndex > 0)" :key="studyIndx"
          :span="studyIndx == 3 ? 10 : 7">
          <div class="report-item">
            <div class="report-title otw-2">{{ studyItem.name }}</div>
            <div class="report-date flex-center">{{ format(studyItem.pubDate) }}</div>
            <div class="report-desc otw-4">{{ extractText(studyItem.content) }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 专家库 -->
    <div class="experts max-wrapper">
      <div class="common-title">
        <!-- <div class="title"><span><span>专家</span>库</span>/Theory</div> -->
        <div class="title"><span><span>专家</span>库</span></div>
        <div class="more" @click="newTab('/expert-database')">
          <div class="line"></div>
          <span>查看更多</span>
          <div class="line"></div>
        </div>
      </div>
      <div class="flex-center">
        <div @click="changeExpertType(typeItem)" v-for="(typeItem, experIndex) in expertsTypeList" :key="experIndex"
          :class="['experts-type', experTypeActive == typeItem ? 'active' : '']">
          {{ typeItem }}
        </div>
      </div>
      <div class="expert-list">
        <div v-for="(experItem, experIndex) in expertsList" :key="experIndex" @click="toExpertDetails(experItem)"
          :class="['expert-item', experItem.expertType == '宣讲专家' ? 'is-explain' : '']">
          <!-- <img :src="showExpertAvator(experItem)"> -->
          <el-image style="margin: 14px auto 0;width: 221px;height: 253px;display: block;"
            :src="showExpertAvator(experItem)" fit="cover">
            <template #error>
              <img src="/images/expert_default.png" style="width: 100%; height: 100%;">
            </template>
          </el-image>
          <div class="expert-card">
            <div class="expert-name flex-center">{{ experItem.name }}</div>
            <span class="overflow-card label-value otw-2">{{ experItem.expertTitle }}</span>
            <span class="hidden">
              <div class="otw-2">
                <span class="label">职称：</span>
                <span class="label-value">{{ experItem.expertTitle }}</span>
              </div>
              <div style="flex-wrap: wrap;" :title="experItem.researchDirection">
                <span class="label">研究方向：</span>
                <span class="label-value">{{ experItem.researchDirection }}</span>
              </div>
              <div class="otw-1" style="display: flex;justify-content: space-between;">
                <div>
                  <span class="label-value">成果总量：</span>
                  <span class="label-value">{{ experItem.totalAchievements }}</span>
                </div>
                <div>
                  <span class="label-value">被引频次：</span>
                  <span class="label-value">{{ experItem.timesCited }}</span>
                </div>
              </div>
              <div class="otw-1" style="display: flex;justify-content: space-between;">
                <div>
                  <span class="label-value">H指数：</span>
                  <span class="label-value">{{ experItem.hIndex ?? 0 }}</span>
                </div>
                <div>
                  <span class="label-value">G指数：</span>
                  <span class="label-value">{{ experItem.gIndex ?? 0 }}</span>
                </div>
              </div>
              <div class="otw-1">
                <span class="label-value">成果下载量：</span>
                <span class="label-value">{{ experItem.downloadCount }}</span>
              </div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 社科资讯 -->
    <div class="consultation">
      <div class="consultation-main max-wrapper">
        <div class="common-title" style="padding-bottom: 14px;margin-bottom: 98px;">
          <!-- <div class="title" style="color: #fff;"><span>社科资讯</span>/Social Science Consultation</div> -->
          <div class="title" style="color: #fff;"><span>社科资讯</span></div>
          <div class="more" @click="newTab('/socialscience-news/socialscience-list')">
            <div class="line"></div>
            <span style="color: #fff;">查看更多</span>
            <div class="line"></div>
          </div>
        </div>
        <swiper :modules="[Autoplay]" :slides-per-view="3" :space-between="30" :autoplay="{ pauseOnMouseEnter: true }">
          <swiper-slide @click="toSocialscienceDetails(item)" v-for="(item, index) in information" :key="index"
            class="consultation-item">
            <!-- <img :src="item.url"> -->
            <el-image style="width: 100%;height: 297px;" :src="item.url" fit="cover">
              <template #error>
                <img src="/images/course_default.png" style="width: 100%; height: 100%;">
              </template>
            </el-image>
            <div class="consultation-date">
              <div class="month">{{ item.month }}</div>
              <span class="date today">{{ item.day }}</span>
            </div>
            <div class="content">
              <div class="title otw-2">{{ item.title }}</div>
              <div class="desc otw-5">
                {{ item.content }}
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="popularize max-wrapper">
      <div class="common-title">
        <!-- <div class="title"><span><span>社科</span>普及</span>/Theoretical learning</div> -->
        <div class="title"><span><span>社科</span>普及</span></div>
        <!-- <div class="more">
          <div class="line"></div>
          <span>查看更多</span>
          <div class="line"></div>
        </div> -->
      </div>
      <div class="popularize-main">
        <div ref="chartMapRef" class="popularize-l" @mouseleave="mouseleave"></div>
        <div class="popularize-r" v-loading="preachLoading">
          <div class="r-header"><span style="cursor: pointer;" @click="getRegionNum('')">全部</span><template
              v-if="activePreachName">/</template><span style="color: var(--theme-color)">{{ activePreachName }}</span>
          </div>
          <div class="preach-type">
            <div :class="['type-item', activePreach == 1 ? 'active' : '']" @click="onPreachClick(1)">
              <div class="type-icon flex-center">
                <img src="/images/preach_team.png">
              </div>
              <div class="type-info">
                <div>宣讲队</div>
                <span>{{ RegionNum.xuanjiangdui }}</span>
              </div>
            </div>
            <div :class="['type-item', activePreach == 2 ? 'active' : '']" @click="onPreachClick(2)">
              <div class="type-icon flex-center">
                <img src="/images/preach_location.png">
              </div>
              <div class="type-info">
                <div>宣讲基地</div>
                <span>{{ RegionNum.xuanjiangjidi }}</span>
              </div>
            </div>
            <div :class="['type-item', activePreach == 3 ? 'active' : '']" @click="onPreachClick(3)">
              <div class="type-icon flex-center">
                <img src="/images/preach_org.png">
              </div>
              <div class="type-info">
                <div>机构组织</div>
                <span>{{ RegionNum.jigouzuzhi }}</span>
              </div>
            </div>
            <div :class="['type-item', activePreach == 4 ? 'active' : '']" @click="onPreachClick(4)">
              <div class="type-icon flex-center">
                <img src="/images/preach_up.png">
              </div>
              <div class="type-info">
                <div>报送数量</div>
                <span>{{ RegionNum.baosongnum }}</span>
              </div>
            </div>
          </div>
          <el-scrollbar class="preach-list" height="100%">
            <el-collapse v-model="activeNames">
              <el-collapse-item v-for="(preachItem, preachIndex) in preachList" :key="preachIndex" :name="preachIndex">
                <template #title>
                  <div class="preach-header">
                    <span class="header-l">{{ preachItem.name ?? preachItem.text }}</span>
                    <span v-if="preachItem.activePreach != 3" class="header-r">成立时间：{{
                      moment(preachItem.creationTime).format('YYYY') }}</span>
                  </div>
                </template>
                <div v-if="preachItem.activePreach == 1" class="preach-item">
                  <div class="item-info">
                    <div class="info-label">责任单位：</div>
                    <div class="info-value">{{ preachItem.responsibleUnit }}</div>
                  </div>
                  <div class="item-info">
                    <div class="info-label">成员情况：</div>
                    <div class="info-value">{{ preachItem.memberShip }}</div>
                  </div>
                  <div class="item-info">
                    <div class="info-label">宣讲对象：</div>
                    <div class="info-value">{{ preachItem.preachObject }}</div>
                  </div>
                </div>
                <div v-if="preachItem.activePreach == 2" class="preach-item">
                  <div class="item-info">
                    <div class="info-label">支持单位：</div>
                    <div class="info-value">{{ preachItem.supportUnit }}</div>
                  </div>
                  <div class="item-info">
                    <div class="info-label">基地类型：</div>
                    <div class="info-value">{{ preachItem.baseType }}</div>
                  </div>
                </div>
                <div v-if="preachItem.activePreach == 3" class="preach-item">
                  <div class="item-info">
                    <div class="info-label">组织名称：</div>
                    <div class="info-value">{{ preachItem.orgName }}</div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: 'HomeView' }
</script>
<script setup>
import { onMounted, ref, reactive } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import moment, { format } from '@/plugins/moment.js'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
import 'swiper/css'
import 'swiper/css/pagination';
import { useSystemStore } from '@/stores/modules/system.js';
import wuhanJson from '@/utils/wuhan-geo.json'
import { extractText, getImageUrl, showExpertAvator } from '@/utils/index.js'
import { http, userHttp } from '@/utils/http/index.js'
import { ElMessage } from 'element-plus';
import { reFileResult } from "@/utils/backend.js"
import { useAuthStore } from '@/stores/modules/auth.js';

const systemStore = useSystemStore()

/* 用户信息 */
const authStore = useAuthStore()

const newTab = (url) => window.open(url)

const goBackendFilling = () => {
  let url = ''
  const actions = authStore.userInfo.actions
  if (!actions) return ElMessage.warning("请先登录")

  const isFillingAdd = actions.find(item => item.id == '1-3-2')
  const isFillingApproval = actions.find(item => item.id ==
    '1-3-3')

  if (isFillingAdd || (isFillingAdd && isFillingApproval)) {
    url = '/backend/learn-filling'
  } else if (isFillingApproval) {
    url = '/backend/learn-filling-approval'
  } else {
    return ElMessage.warning("您未获得相应模块权限，请联系管理员配置！")
  }

  newTab(url)
}

const goBackendSubmitted = () => {
  let url = ''
  const actions = authStore.userInfo.actions
  if (!actions) return ElMessage.warning("请先登录")

  const isSubmittedAdd = actions.find(item => item.id == '2-3-1')
  const isSubmittedApproval = actions.find(item => item.id ==
    '1-3-3')

  if (isSubmittedAdd || (isSubmittedAdd && isSubmittedApproval)) {
    url = '/backend/publicize-submitted'
  } else if (isSubmittedApproval) {
    url = '/backend/publicize-submitted-approval'
  } else {
    return ElMessage.warning("您未获得相应模块权限，请联系管理员配置！")
  }

  newTab(url)
}

const goBackendFund = () => {
  let url = ''
  const actions = authStore.userInfo.actions
  if (!actions) return ElMessage.warning("请先登录")

  const isFundAdd = actions.find(item => item.id == '1-4-2')
  const isFundApproval = actions.find(item => item.id ==
    '1-4-3')

  if (isFundAdd || (isFundAdd && isFundApproval)) {
    url = '/backend/learn-fund'
  } else if (isFundApproval) {
    url = '/backend/learn-fund-approval'
  } else {
    return ElMessage.warning("您未获得相应模块权限，请联系管理员配置！")
  }

  newTab(url)
}

/**设置头部 */
systemStore.headerType = 'logo_default'
systemStore.headerWidthType = 'max'
systemStore.headerBgcolor = 'theme-color'
systemStore.headerFontColor = '1'


/**理论宣传 */
const studyNews = ref([])
http.$GET('/Home/GetHomeList', { pageSize: 4, pageIndex: 1 }).then(res => {
  if (res.isError) return
  studyNews.value = res.result
})

/**去动态详情页 */
const toTrends = (item) => {
  window.open('/trends-list/trends-details?type=theory&id=' + item.id)
}

/**测试登录 */
// http.$GET('/test/userAuthTest').then()

/**理论学习 */
const themeList = ref([
  { name: '十个明确', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/explicit', style: { marginRight: '21px', width: '389px' } },
  { name: '十四个坚持', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/insist', style: { marginRight: '21px', width: '398px' } },
  { name: '十三个方面成就', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/achieve', style: { marginRight: '21px', width: '386px' } },
  { name: '六个必须坚持', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/mustInsist', style: { width: '389px' } },
  { name: '习近平总书记关于党的建设的重要思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/1', style: { marginRight: '21px', width: '513px' } },
  { name: '习近平经济思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/2', style: { marginRight: '21px', width: '350px' } },
  { name: '习近平法治思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/3', style: { marginRight: '21px', width: '350px' } },
  { name: '习近平文化思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/4', style: { width: '350px' } },
  { name: '习近平生态文明思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/5', style: { marginRight: '21px', width: '350px' } },
  { name: '习近平强军思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/6', style: { marginRight: '21px', width: '350px' } },
  { name: '习近平外交思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/7', style: { marginRight: '21px', width: '350px' } },
  { name: '习近平总书记关于网络强国的重要思想', subjectCnkiUrl: 'https://dj.cnki.net/xjpd/#/aspect/8', style: { width: '513px' } },
])
// http.$POST('/TheoryStudy/GetTheoryStudySubjectCnkiList', { pageSize: 11, pageIndex: 1 }).then(res => {
//   if (res.isError) return
//   themeList.value = res.result.dataLst
// })
const toOtherPage = url => window.open(url)


/**专家库 */
const expertsList = ref([])
const experTypeActive = ref('')
const expertsTypeList = ref(['中国共产党', '马克思主义哲学', '政治学'])
const changeExpertType = (expertItem) => {
  experTypeActive.value == expertItem ? experTypeActive.value = '' : experTypeActive.value = expertItem
  getExpertList()
}
const getExpertList = () => {
  http.$GET('/Home/GetExpertGroupInfoByColName', {
    pageIndex: 1, pageSize: 6, orderbyCol: 'ExpertWeight', Subject: experTypeActive.value
  }).then(res => {
    if (res.isError) return
    expertsList.value = res.result
  })
}

getExpertList()

/**跳转详情页面 */
const toExpertDetails = (experItem) => {
  newTab(`/expert-database/expert-details?id=${experItem.id}`)
}

/**社科资讯 */
const information = ref([])

const monthEn = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'April', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sept', 10: 'Oct', 11: 'Nov', 12: 'Dec', }
http.$POST('/SocialScience/GetSocialScienceNewList', { pageIndex: 1, pageSize: 8 }).then(res => {
  if (res.isError) return
  information.value = res.result.dataLst.map(el => {
    return {
      ...el,
      title: el.name,
      content: extractText(el.content),
      month: monthEn[moment(el.createTime).format('M')],
      day: moment(el.createTime).format('DD'),
      url: getImageUrl(el.newsPicture)
    }
  })

})
const toSocialscienceDetails = (item) => {
  console.log(item)
  window.open('/socialscience-news/socialscience-details?id=' + item.id)
}

/* 各类定位点列表 */
const preachTeamLocation = ref([])
const preachBaseLocation = ref([])
const preachOrgLocation = ref([])

/* 获取宣讲队定位点 */
const teamPageIndex = ref(1)
const teamPageSize = ref(1000)
const getPreachTeam = () => {
  let params = {
    pageIndex: teamPageIndex.value,
    pageSize: teamPageSize.value,
    dfi: {
      logic: 0,
      filters: [
        { field: 'id', operator: 11, value: 0 },
      ]
    },
  }
  http.$POST('/Preach/GetPreachTeamList', params).then(res => {
    if (res.isError) return
    res.result.dataLst.map(item => {
      if (item.longitude && item.latitude) {
        preachTeamLocation.value.push({
          value: [Number(item.longitude), Number(item.latitude)],
          label: {
            formatter: "", //圆环显示文字
          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
            formatter: function () {
              return `
                <div style='text-align:left'>
                  宣讲队：${item.name || ""}<br/>
                  <img style="width: 200px; ${reFileResult(item.coverUrl) ? 'visibility: visible' : 'visibility: hidden'}" src="${reFileResult(item.coverUrl)}" alt="" srcset="">
                </div>
              `
            }
          },
        })
      }
    })
    myChart.setOption(option, true);
    if (res.result.countAll > res.result.pageIndex * res.result.pageSize) {
      teamPageIndex.value = teamPageIndex.value + 1
      getPreachTeam()
    }
  })
}
/* 获取宣讲基地列表 */
const basePageIndex = ref(1)
const basePageSize = ref(1000)
const getPreachBase = () => {
  let params = {
    pageIndex: basePageIndex.value,
    pageSize: basePageSize.value,
    dfi: {
      logic: 0,
      filters: [
        { field: 'id', operator: 11, value: 0 },
      ]
    },
  }
  http.$POST('/Preach/GetPreachBaseList', params).then(res => {
    if (res.isError) return
    res.result.dataLst.map(item => {
      if (item.longitude && item.latitude) {
        preachBaseLocation.value.push({
          value: [Number(item.longitude), Number(item.latitude)],
          label: {
            formatter: "", //圆环显示文字
          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
            formatter: function () {
              return `
                <div style='text-align:left'>
                  宣讲基地：${item.name || ""}<br/>
                  <img style="width: 200px; ${reFileResult(item.picUrl) ? 'visibility: visible' : 'visibility: hidden'}" src="${reFileResult(item.picUrl)}" alt="" srcset="">
                </div>
              `
            }
          },
        })
      }
    })
    myChart.setOption(option, true);
    if (res.result.countAll > res.result.pageIndex * res.result.pageSize) {
      basePageIndex.value = basePageIndex.value + 1
      getPreachBase()
    }
  })
}
/* 获取组织列表 */
// const preachOrgList = ref([])
const getPreachOrg = () => {
  userHttp.$GET('/OrgManager/GetOrgInfo').then(res => {
    if (res.IsError) return
    res.Result.data.map(item => {
      if (item.longitude && item.latitude) {
        preachOrgLocation.value.push({
          value: [Number(item.longitude), Number(item.latitude)],
          label: {
            formatter: "", //圆环显示文字
          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
            formatter: function () {
              return `
                <div style='text-align:left'>
                  组织：${item.name || ""}<br/>
                </div>
              `
            }
          },
        })
      }
    })
    myChart.setOption(option, true);
  })
}

/* 获取各区报送热力 */
const hotList = ref([])
const getPreachHot = () => {
  http.$GET("/Home/GetAreaActivityHot").then(res => {
    if (res.isError) return
    res.result.map(item => {
      hotList.value.push({
        name: item.region,
        value: item.commitCount
      })
    })
    option.visualMap.max = Math.max(...res.result.map(obj => obj.commitCount))
    myChart.setOption(option, true);
  })
}

const activeNames = ref()
const activePreach = ref()
const activePreachName = ref('')
const preachList = ref([])
const RegionNum = reactive({
  xuanjiangdui: 0,
  xuanjiangjidi: 0,
  jigouzuzhi: 0,
  baosongnum: 0,
})


const getTeamList = () => {
  http.$POST('/Preach/GetPreachTeamList', {
    dfi: {
      logic: 0,
      filters: [
        { field: 'area', operator: 0, value: activePreachName.value },
      ]
    },
  }).then(res => {
    if (res.isError) return
    preachList.value.push(...res.result.dataLst.map(item => {
      item.activePreach = 1
      return item
    }))
  })
}
const getBaseList = () => {
  http.$POST('/Preach/GetPreachBaseList', {
    dfi: {
      logic: 0,
      filters: [
        { field: 'area', operator: 0, value: activePreachName.value },
      ]
    },
  }).then(res => {
    if (res.isError) return
    preachList.value.push(...res.result.dataLst.map(item => {
      item.activePreach = 2
      return item
    }))
  })
}
const getOrgList = () => {
  userHttp.$GET('/OrgManager/GetOrgList', { region: activePreachName.value }).then(res => {
    if (res.IsError) return
    preachList.value.push(...res.result.content.map(item => {
      item.activePreach = 3
      return item
    }))
  })
}

/**点击区域显示类型展示列表 */
const onPreachClick = (type) => {
  if (type == 4) return
  if (activePreach.value == type && activePreach.value !== '') return
  activePreach.value = type
  preachList.value = []
  activeNames.value = []
  if (activePreach.value == 1 || !activePreach.value) getTeamList()
  if (activePreach.value == 2 || !activePreach.value) getBaseList()
  if (activePreach.value == 3 || !activePreach.value) getOrgList()
}

/**根据区域查询数字 */
const preachLoading = ref(false)
const getRegionNum = (name) => {
  activePreachName.value = name
  const submit = {
    region: name
  }
  RegionNum.xuanjiangdui = 0
  RegionNum.xuanjiangjidi = 0
  RegionNum.jigouzuzhi = 0
  RegionNum.baosongnum = 0
  preachLoading.value = true
  http.$GET('/Preach/GetRegionNum', submit).then(res => {
    if (res.isError) return
    RegionNum.xuanjiangdui = res.result[0].count
    RegionNum.xuanjiangjidi = res.result[1].count
    RegionNum.jigouzuzhi = res.result[2].count
    RegionNum.baosongnum = res.result[3].count
    onPreachClick('')
  }).finally(() => preachLoading.value = false)
  /**第一次初始化 */
  if (!name) onPreachClick('')
}
getRegionNum('')

getPreachHot()
getPreachTeam()
getPreachBase()
getPreachOrg()

echarts.registerMap('WUHAN', wuhanJson);
const option = {
  backgroundColor: 'transparent',
  tooltip: {
    show: true,
    formatter: (params) => {
      return `${params.name}<br/>报送数量：${params.value ? params.value : ''}`
    }
  },
  visualMap: {
    show: false,
    min: 0,
    max: 0,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#FEF9E0', '#FCECA3', '#FCE888', '#FDD67B', '#FCC17C', '#EF895F']
    }
  },
  geo: [
    {
      show: true,
      name: '武汉市',
      type: 'map',
      map: 'WUHAN',
      zoom: 1.2,
      roam: true,
      animationDurationUpdate: 0,
      grid: {
        top: 0,
        bottom: 0,
      },
      label: {
        show: true,
        color: '#434343'
      },
      emphasis: {
        label: {
          show: true,
        },
        itemStyle: {
          areaColor: '#FCC17C'
        },
      },
    }
  ],
  series: [
    {
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 1,
      rippleEffect: {
        period: 4,
        brushType: "stroke",
        scale: 4,
      },
      label: {
        show: true,
        color: "#fff",
      },
      symbol: `image:///images/preach_team.png`, //定位图标样式
      symbolSize: 30,
      //点的名称和经纬度
      data: preachTeamLocation.value
    },
    {
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 1,
      rippleEffect: {
        period: 4,
        brushType: "stroke",
        scale: 4,
      },
      symbol: "image:///images/preach_location.png", //定位图标样式
      symbolSize: 30,
      //点的名称和经纬度
      data: preachBaseLocation.value
    },
    {
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 1,
      rippleEffect: {
        period: 4,
        brushType: "stroke",
        scale: 4,
      },
      symbol: "image:///images/preach_org.png", //定位图标样式
      symbolSize: 30,
      //点的名称和经纬度
      data: preachOrgLocation.value
    },
    {
      name: '武汉市',
      type: 'map',
      map: 'WUHAN',
      geoIndex: 0,
      data: hotList.value
    }
  ]
};
const chartMapRef = ref(null)
let myChart;
onMounted(() => {
  myChart = echarts.init(chartMapRef.value, null, { renderer: 'svg' })
  myChart.setOption(option, true);
  myChart.on('click', (param) => {
    /**社科普及点击事件 */
    getRegionNum(param.name)
  })
})

const mouseleave = () => {
  myChart.setOption(option, true);
}
</script>
<style lang='scss' scoped>
@import "@/assets/styles/variables.scss";

.HomeView {
  width: 100%;

  .banner {
    width: 100%;
    min-width: $maxWrapper;
    height: 668px;
    background-image: url(@/assets/images/front/home_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 102%;
    margin-bottom: 30px;
    position: relative;

    .banner-main {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;

      .banner-title {
        text-align: right;
        position: absolute;
        top: 101px;
        right: 0;
        width: 741px;
        font-size: 80px;
        font-family: Source Han Serif CN-Bold, Source Han Serif CN;
        font-weight: bold;
        color: #fff;
        text-shadow: 0px 3px 6px #646464;
        -webkit-text-stroke: 1px #FFFFFF;
      }

      .banner-desc {
        position: absolute;
        top: 354px;
        right: 0;
        font-size: 23px;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

    .banner-nav {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 186px;
      background-color: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(3px);
      // background-image: url(@/assets/images/front/nav_bg.png);

      .nav-main {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .nav-item {
          display: flex;
          align-items: center;
          height: 100px;
          gap: 36px;
          color: #fff;
          cursor: pointer;

          .nav-logo {
            width: 65px;
            height: 73px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;

            &.xuexi {
              background-image: url(@/assets/images/front/nav_xuexi.png);
            }

            &.xuanchuan {
              background-image: url(@/assets/images/front/nav_xuanchuan.png);
            }

            &.yanjiu {
              background-image: url(@/assets/images/front/nav_yanjiu.png);
            }
          }

          &:hover {
            color: #A72836;

            .nav-logo {
              &.xuexi {
                background-image: url(@/assets/images/front/nav_xuexi_r.png);
              }

              &.xuanchuan {
                background-image: url(@/assets/images/front/nav_xuanchuan_r.png);
              }

              &.yanjiu {
                background-image: url(@/assets/images/front/nav_yanjiu_r.png);
              }
            }

            .nav-r {
              .line {
                background-color: var(--theme-color);
              }
            }
          }

          .nav-r {
            display: flex;
            height: 86px;
            flex-direction: column;
            justify-content: space-between;

            & span:nth-child(1) {
              font-size: 30px;
              font-weight: 500;
            }

            & span:nth-child(2) {
              font-size: 20px;
            }

            .line {
              width: 20px;
              height: 3px;
              background-color: #fff;
            }
          }
        }

        .nav-line {
          width: 2px;
          height: 75px;
          background-color: #fff;
        }
      }
    }
  }

  .modules {
    height: 336px;
    display: flex;
    gap: 22px;
    margin-bottom: 45px;

    .module-item {
      flex: 1;
      cursor: pointer;
      user-select: none;
      background-color: #FAFAFA;
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: 176px 162px;
      padding: 35px 29px;

      img {
        width: 64px;
        margin-bottom: 60px;
      }

      &:nth-child(1) {
        background-image: url(@/assets/images/front/module_zhuanjia_bg.png);
      }

      &:nth-child(2) {
        background-image: url(@/assets/images/front/module_chengguo_bg.png);
      }

      &:nth-child(3) {
        background-image: url(@/assets/images/front/module_zhuanti_bg.png);
      }

      .module-name {
        font-size: 25px;
        font-weight: 500;
        color: #333333;
        margin-bottom: 12px;
      }

      .module-line {
        width: 64px;
        height: 4px;
        background: var(--theme-color);
        margin-bottom: 13px;
      }

      .module-desc {
        font-size: 20px;
        font-weight: 400;
        color: #A5A5A5;
      }
    }

    .more-function {
      width: 578px;
      padding: 17px 25px;
      background-color: #F8F8F8;

      .more-title {
        font-size: 20px;
        font-weight: 400;
        color: #A5A5A5;
        margin-bottom: 20px;

        span {
          font-size: 24px;
          font-weight: 500;
          color: #454545;
          margin-right: 10px;
        }
      }

      .common-more {
        color: #606060;
        font-size: 20px;
        padding-bottom: 6px;
        border-bottom: 2px solid #EFEFEF;
        position: relative;
        margin-bottom: 24px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 78px;
          height: 3px;
          background-color: var(--theme-color);
        }
      }

      .fun-item {
        cursor: pointer;
        font-size: 18px;
        font-weight: 400;
        color: #444444;
        margin-bottom: 20px;
        min-width: 33.33%;
        display: inline-block;

        &:hover {
          color: var(--theme-color);
        }
      }
    }
  }

  .study {
    width: 100%;
    min-width: $maxWrapper;
    height: 489px;
    background-image: url(@/assets/images/front/xuanchuan_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .study-main {
      color: #FFFFFF;
      font-family: Source Han Sans SC-Bold, Source Han Sans SC;
      height: 100%;
      position: relative;

      .study-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
      }

      .study-desc {
        text-align: center;
        color: #F2F2F2;
        line-height: 26px;
        font-size: 24px;
        opacity: 0.6;
        margin-top: -8px;
        margin-bottom: 28px;
      }

      .study-date {
        margin-left: 69px;
        width: 104px;
        height: 29px;
        border-radius: 4px;
        background-color: #E8C8CB;
        color: var(--theme-color);
        margin-bottom: 18px;
        margin-top: 63px;
      }

      .study-text-title {
        margin-left: 69px;
        width: 48%;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .study-text {
        margin-left: 69px;
        width: 48%;
        font-size: 16px;
        font-weight: 400;
        padding-right: 44px;
        line-height: 26px;
        letter-spacing: 1px;
      }

      .study-img {
        position: absolute;
        bottom: -61px;
        right: 66px;
        width: 621px;
        height: 384px;
        object-fit: contain;
        display: block;
      }
    }
  }

  .study-report {
    margin-bottom: 110px;

    .more-buuton {
      padding: 28px 0 57px;
    }

    .report-item {
      border-top: 2px solid #F4F4F4;
      padding-top: 31px;
      height: 260px;
      cursor: pointer;
      font-family: Source Han Sans SC-Medium, Source Han Sans SC;

      .report-title {
        font-size: 22px;
        font-weight: 500;
        color: #434343;
        margin-bottom: 12px;
      }

      .report-date {
        width: 104px;
        height: 27px;
        border-radius: 4px;
        border: 1px solid var(--theme-color);
        margin-bottom: 25px;
        color: var(--theme-color);
      }

      .report-desc {
        font-size: 16px;
        font-weight: 400;
        color: #434343;
        line-height: 26px;
        letter-spacing: 1px;
      }
    }
  }

  .study-jinping {
    width: 100%;
    min-width: $maxWrapper;
    background-image: url(@/assets/images/front/xuanchuan_banner_l.png);
    background-repeat: no-repeat;
    background-size: 100% 314px;

    .study-title {
      color: #F2F2F2;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-top: 51px;
    }

    .study-desc {
      text-align: center;
      color: #F2F2F2;
      line-height: 26px;
      font-size: 24px;
      opacity: 0.6;
      margin-top: -8px;
      margin-bottom: 28px;
    }

    .theme-list {
      gap: 21px;
      margin-bottom: 70px;
      margin-top: 48px;

      &:first-child {
        margin-top: 66px;
      }

      .theme-item {
        margin-bottom: 12px;
        display: inline-block;
        line-height: 104px;
        text-align: center;
        height: 104px;
        color: #fff;
        font-size: 20px;
        line-height: 104px;
        font-weight: 700;
        cursor: pointer;
        justify-content: center;
        background-size: cover;
        background-repeat: no-repeat;

        &:nth-child(n) {
          background-image: url(@/assets/images/front/theme_1.png);
        }

        &:nth-child(2n) {
          background-image: url(@/assets/images/front/theme_2.png);
        }

        .right {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid #fff;

          .el-icon {
            color: #fff;
          }
        }

      }
    }
  }

  .experts {
    margin-bottom: 42px;

    .expert-direction {
      padding: 10px 50px;
      background: #E3E3E3;
      font-size: 20px;
      color: #464646;
      position: relative;
      cursor: pointer;
      transition: all .2s;

      &.active {
        cursor: default;
        background-color: var(--theme-color);
        color: #fff;

        &::after {
          border-top-color: var(--theme-color);
        }
      }

      &::after {
        transition: all .2s;
        content: '';
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 0px;
        height: 0px;
        border: 10px solid transparent;
      }
    }

    .experts-type {
      display: inline-block;
      padding: 7px 16px;
      border-radius: 24px;
      margin-right: 22px;
      background-color: #F5F5F5;
      border: 2px solid #F5F5F5;
      color: #464646;
      cursor: pointer;
      transition: all .2s;

      &:hover,
      &.active {
        border-color: var(--theme-color);
        color: var(--theme-color);
      }
    }

    .expert-list {
      width: 100%;
      display: flex;
      gap: 19px;
      margin-top: 37px;

      .expert-item {
        width: 257px;
        height: 357px;
        background-color: #FCFCFC;
        position: relative;
        overflow: hidden;
        cursor: pointer;

        &::before {
          content: '';
          position: absolute;
          top: 26px;
          right: 4px;
          width: 28px;
          height: 3px;
          background-color: var(--theme-color);
          z-index: 2;
        }

        &.is-explain::after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          width: 56px;
          height: 78px;
          background-image: url(@/assets/images/front/expert_medal.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        img {
          margin: 14px auto 0;
          width: 221px;
          height: 253px;
          object-fit: cover;
          display: block;
        }

        .expert-card {
          width: 100%;
          height: 221px;
          background-color: #FCFCFC;
          position: relative;
          transition: margin-top .3s;
          font-size: 14px;
          padding: 26px 14px 8px;
          display: flex;
          flex-direction: column;
          gap: 6px;

          .hidden {
            display: none;

            >div {
              margin-bottom: 2px;
            }
          }

          .overflow-card {
            display: block;
          }

          .expert-name {
            position: absolute;
            top: -22px;
            left: -1px;
            font-size: 15px;
            width: 95px;
            height: 37px;
            color: #fff;
            background-color: var(--theme-color);
          }

          .label {
            color: #8D8D8D;
          }

          .label-value {
            color: #626262;
          }
        }

        &:hover {
          .overflow-card {
            display: none;
          }

          .hidden {
            display: block;
          }

          .expert-card {
            margin-top: -84px;
          }
        }
      }
    }
  }

  .consultation {
    width: 100%;
    margin-bottom: 60px;
    min-width: $maxWrapper;
    min-height: 373px;
    background-image: url(@/assets/images/front/xuanchuan_banner_l.png);
    background-repeat: no-repeat;
    background-size: 100% 373px;

    .consultation-main {
      color: #FFFFFF;
      height: 100%;

      .consultation-item {
        user-select: none;
        cursor: pointer;
        width: 473px !important;
        display: inline-block;

        img {
          width: 100%;
          height: 297px;
        }

        .consultation-date {
          margin: 36px 0 6px;
          color: #434343;
          display: flex;

          .month {
            height: 30px;
            font-size: 22px;
            transform: rotate(90deg) translate(20px, 12px);
          }

          .date {
            font-weight: bold;
            font-size: 50px;
            margin-left: -12px;
          }

          .today {
            color: #76150C;
          }
        }

        .content {
          width: 100%;
          height: 200px;
          padding: 8px 20px 20px;
          color: #434343;
          border-left: 1px solid #BCBCBC;
          font-family: Source Han Sans SC-Bold, Source Han Sans SC;

          .title {
            font-weight: 500;
            font-size: 22px;
            margin-bottom: 25px;
            letter-spacing: 1px;
          }

          .desc {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 26px;
          }
        }
      }

      :deep(.swiper) {
        padding-left: 6px;
      }
    }
  }

  .popularize {
    margin-bottom: 46px;

    .popularize-main {
      width: 100%;
      height: 942px;
      background: #FCFCFC;
      border-radius: 13px;
      overflow: hidden;
      display: flex;
      padding: 23px 21px;
      gap: 20px;

      .popularize-l {
        flex: 1;
        width: 0;
        height: 100%;
      }

      .popularize-r {
        width: 492px;
        height: 100%;
        background-color: #F8F8F8;
        border-radius: 20px;
        padding: 20px 22px;
        display: flex;
        flex-direction: column;

        &>:deep(.el-loading-mask) {
          z-index: 1 !important;
        }

        .r-header {
          font-size: 18px;
          font-weight: 500;
          color: #999999;
          padding-bottom: 12px;
          border-bottom: 2 px solid #F4F4F4;
        }

        .preach-type {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          column-gap: 10px;
          row-gap: 12px;
          padding: 12px 0 22px;

          .type-item {
            width: 48%;
            height: 80px;
            border-radius: 13px;
            padding: 13px 20px;
            display: flex;
            color: #626262;
            cursor: pointer;
            transition: all .2s;
            user-select: none;

            &.active {
              color: #fff;
              cursor: default;
              background-color: var(--theme-color) !important;
            }

            .type-icon {
              width: 55px;
              height: 100%;
              display: flex;
              background-color: #fff;
              border-radius: 12px;
              margin-right: 19px;

              img {
                width: 28px;
                height: 35px;
              }
            }

            .type-info {
              font-size: 18px;
              font-weight: 400;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              span {
                font-weight: bold;
              }
            }

            &:nth-child(1) {
              background-color: #F4FFE8;
            }

            &:nth-child(2) {
              img {
                width: 25px;
                height: 41px;
              }

              background-color: #F0F8FD;
            }

            &:nth-child(3) {
              img {
                width: 31px;
                height: 34px;
              }

              background-color: #FFFAED;
            }

            &:nth-child(4) {
              cursor: not-allowed;

              img {
                width: 27px;
                height: 31px;
              }

              background-color: #FDF4F6;
            }
          }
        }

        .preach-list {
          flex: 1;
          height: 0;

          .preach-header {
            width: 100%;
            padding-right: 6px;
            font-size: 20px;
            font-weight: bold;
            color: #363636;
            display: flex;
            justify-content: space-between;

            .header-l {
              flex: 1;
              width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .header-r {
              font-size: 18px;
              color: #525252;
            }
          }

          :deep(.el-collapse) {
            .el-collapse-item__header {
              background-color: transparent;
            }

            .el-collapse-item__wrap {
              background-color: transparent;
            }
          }

          .preach-item {
            margin-top: 24px;
            margin-bottom: 13px;

            .item-info {
              display: flex;
              font-size: 18px;

              .info-label {
                color: #717171;
              }

              .info-value {
                flex: 1;
                width: 0;
                color: #525252;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }

  .common-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 0 54px;
    margin: 0 auto;

    .title {
      color: #262626;
      font-size: 20px;

      span {
        font-size: 32px;
        font-weight: 600;

        &>span {
          color: var(--theme-color);
        }
      }
    }

    .more {
      color: #262626;
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;

      span {
        cursor: pointer;
        margin: 0 22px;
      }

      .line {
        width: 31px;
        border: 1px solid #D3D3D3;
      }
    }
  }
}
</style>
<style>
.map-tooltip {
  min-width: 160px;

  .show-desc {
    display: flex;
    justify-content: space-between;
  }
}
</style>